<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.操作节点属性</title>
</head>
<body>
    <!-- 
       节点的属性： 
          1. 内置属性/默认属性
          2. 自定义属性
     -->
     <!-- 
        onclick 点击事件   handlerAddAttr()
      -->
     <button onclick="handlerAddAttr()">添加属性</button>
     <button onclick="handlerRemoveAttr()">移除属性</button>
     <button onclick="handlerGetAttr()">获取属性</button>
     <hr>
     <div id="divNode">xxxx</div>

     <script>
        /*
        属性操作：[添加自定义属性 也可以添加默认属性]
           setAttribute(key,value)
           getAttribute(key)
           removeAttribute(key)
        */
        function handlerAddAttr() {
            // 添加默认属性
            // 节点.属性名字
            divNode.align = "center"
            // 添加自定义属性
            // divNode.lpy = "xxx"
            divNode.setAttribute("lpy","xxx")  
        }

        function handlerRemoveAttr() {
            divNode.removeAttribute("lpy")
            divNode.removeAttribute("align")
        }

        function handlerGetAttr() {
            var v01 = divNode.getAttribute("lpy")
            console.log(v01);
            var v02 = divNode.getAttribute("align")
            console.log(v02);
        }

     </script>
    
</body>
</html>